<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div
                class="score-lottery-success-dialog"
                v-if="dialogStore.isScoreLotterySuccessDialogVisible"
            >
                <div
                    class="score-lottery-success-dialog__mask"
                    @click="onClose"
                ></div>
                <div class="score-lottery-success-dialog__content">
                    <div class="score-lottery-success-dialog__title"></div>

                    <div class="score-lottery-success-dialog__icon">
                        <img :src="getIcon()" />
                    </div>

                    <div class="score-lottery-success-dialog__text">
                        {{ getText() }}
                    </div>

                    <div
                        class="score-lottery-success-dialog__btn"
                        @click="onClose"
                    >
                        确定
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";
const dialogStore = useDialogStore();
const { getIcon, getText, onClose } = useContent();
</script>
<style lang="scss" scoped>
.score-lottery-success-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 490px;
        height: 478px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/dialog-bg.png");
        background-size: 100% 100%;
        transform: translate(-50%, -50%) scale(0.5);
    }

    &__title {
        position: absolute;
        top: 90px;
        left: 50%;
        width: 217px;
        height: 36px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/success-title.png");
        transform: translateX(-50%);
    }

    &__icon {
        position: absolute;
        top: 195px;
        left: 50%;
        transform: translateX(-50%);

        img {
            width: 85px;
            height: 76px;
        }
    }

    &__text {
        position: absolute;
        top: 308px;
        left: 50%;
        font-size: 22px;
        color: #fe3f3d;
        transform: translateX(-50%);
        white-space: nowrap;
        font-weight: bold;
    }

    &__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 394px;
        left: 50%;
        width: 227px;
        height: 61px;
        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/score-lottery/dialog-btn.png");
        font-size: 28px;
        color: #cd410a;
        transform: translateX(-50%);
        cursor: pointer;
        font-weight: bold;
    }
}
</style>
